<template>
  <div class="bos war bold-size">
    <div class="area-center m-t-20">
      <div class="xi title-center">
        <div class="yuan">{{ $route.query.titleIndex }}</div>
        <div class="zhong">{{ $route.query.title }}</div>
      </div>
      <!-- 内容区域 -->
      <div
        class="context richText"
        v-if="$route.query.id != '34532133412'"
        v-html="list"
      ></div>
      <div class="context" v-else>
        <img class="navigation-img" :src="list" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script>
import { coffeeRun } from "@/api/index";
export default {
  data() {
    return {
      text: sessionStorage.getItem("coffeetitle"),
      list: "",
    };
  },
  created() {
    coffeeRun({
      // coffeeType: this.$route.query.id,
      // coffeeId: this.$route.query.superior_id
      typeId: this.$route.query.id, //标题id
      coffeeId: this.$route.query.superior_id, //类型id
    }).then((res) => {
      if (res.data.code == 200) {
        // 全国连锁导航图要特殊处理
        if (this.$route.query.id == "34532133412") {
          //this.list = this.imgurl + res.data.data.content;
          this.list = this.imgurl + res.data.data.detailsContent;
        } else {
          this.list = this.dataHTML(res.data.data.detailsContent);
        }
      }
    });
  },
};
</script>

<style scoped>
.bos {
  min-height: 5.5rem;
}

.xi {
  width: 100%;
  display: flex;
}
.xi .yuan {
  width: 0.16rem;
  height: 0.16rem;
  margin-left: 0.1rem;
  text-align: center;
  line-height: 0.16rem;
  border-radius: 50%;
  margin-top: 0.05rem;
  border: 1px solid black;
}

/* 中间区域 */
.zhong {
  width: 95%;
  height: 100%;
  line-height: 0.3rem;
  padding-left: 0.05rem;
}
/* 内容区域 */
.context {
  width: 100%;
  height: 100%;
  word-wrap: break-word;
}
.context .navigation-img {
  max-width: 100vw;
}
</style>